<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				font: 12px tahoma, arial, Hiragino Sans GB, WenQuanYi Micro Hei, \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, sans-serif;
			}
			
			a {
				text-decoration: none;
				color: #333;
			}
			
			a:hover {
				color: #D80B8C;
			}
			
			.wd {
				width: 1000px;
				height: 97px;
				margin: 0 auto;
			}
			
			.div1 {
				width: 313px;
				height: 53px;
				float: left;
				background-image: url(img/sprite-hash-91639fdc.png);
			}
			
			.div2 {
				float: right;
				width: 455px;
				height: 28px;
				margin-top: 12.5px;
				background-image: url(img/sprite-hash-91639fdc.png);
				background-position: -317px 0;
				background-repeat: no-repeat;
			}
			
			.wd2 {
				width: 1000px;
				height: 600px;
				margin: 0 auto;
				background-image: url(img/57b4bd15bcc545b8b967d1df86589b99.jpg);
				background-repeat: no-repeat;
			}
			
			.div3 {
				width: 300px;
				height: 443px;
				float: right;
				padding-top: 40px;
				padding-right: 74px;
			}
			
			.div3-a {
				font-size: 14px;
				line-height: 16px;
				margin-bottom: 15px;
			}
			
			.denglu1 {
				width: 278px;
				padding: 7px 10px;
				line-height: 18px;
				height: 18px;
				border-radius: 3px;
				color: #333;
				background-color: #fff;
				border: 1px solid #b2b2b2;
				/*margin-bottom: 10px;*/
				outline: none;
			}
			
			.denglu-3 {
				width: 140px;
				height: 50px;
				font-size: 16px;
				line-height: 40px;
				color: white;
				background-color: #f10180;
				border: 1px solid #f10180;
				border-radius: 3px;
				margin-bottom: 20px;
				outline: none;
			}
			
			.denglu-3:hover {
				background-color: rgba(241, 1, 128, 0.6);
				cursor: pointer;
			}
			
			#fl {
				float: left;
			}
			
			.fux {
				width: 19px;
				height: 16px;
				border-radius: 3px;
			}
			
			#fr {
				float: right;
			}
			
			.denglu4 {
				overflow: hidden;
				margin-bottom: 50px;
			}
			
			.denglu5 div {
				background-image: url(img/sprite-hash-91639fdc.png);
				background-repeat: no-repeat;
				width: 25px;
				height: 30px;
				margin-right: 5px;
			}
			
			.xinlang {
				/*background-image: url(img/sprite-hash-91639fdc.png);*/
				background-position: -290px -57px;
				/*background-repeat: no-repeat;
				width: 25px;
				height: 25px;
				margin-right: 5px;*/
			}
			
			.xinlang:hover {
				background-position: -262px -57px;
				cursor: pointer;
			}
			
			.qq {
				/*background-image: url(img/sprite-hash-91639fdc.png);*/
				background-position: -235px -57px;
				/*background-repeat: no-repeat;
				width: 25px;
				height: 25px;
				margin-right: 5px;*/
			}
			
			.qq:hover {
				background-position: -347px -57px;
				cursor: pointer;
			}
			
			.zhifubao {
				/*background-image: url(img/sprite-hash-91639fdc.png);*/
				background-position: -179px -57px;
				/*background-repeat: no-repeat;
				width: 25px;
				height: 25px;
				margin-right: 5px;*/
			}
			
			.zhifubao:hover {
				background-position: -151px -57px;
				cursor: pointer;
			}
			
			.weixing {
				/*background-image: url(img/sprite-hash-91639fdc.png);*/
				background-position: -206px -57px;
				/*background-repeat: no-repeat;
				width: 25px;
				height: 25px;
				margin-right: 5px;*/
			}
			
			.weixing:hover {
				background-position: -318px -57px;
				cursor: pointer;
			}
			
			.gengduo:hover {
				color: #D80B8C;
				cursor: pointer;
			}
			
			.arrow {
				display: inline-block;
				font-size: 0;
				height: 0;
				overflow: hidden;
				border-width: 4px;
				border-style: solid dashed dashed dashed;
				border-color: #666 transparent transparent transparent;
				vertical-align: -2px;
				margin-left: 2px;
			}
			
			#dianji {
				margin-top: 20px;
				display: none;
			}
			
			#dianji a {
				margin: 0 15px;
			}
			
			.mowei {
				width: 1000px;
				margin: 0 auto;
				color: #767074;
				text-align: center;
				margin-top: 40px;
			}
			
			.wz-6-k-n {
				/*display: block;*/
				background-image: url(img/sprite.png);
				background-position: -46px 0;
				width: 19px;
				height: 16px;
				cursor: pointer;
				/*border: solid 1px black;*/
			}
			
			.wz-1-fl {
				float: left;
				font-size: 14px;
				line-height: 16px;
				/*display: inline;*/
				font-family: "微软雅黑";
			}
			
			.denglu {
				height: 60px;
				position: relative;
			}
			
			.tishi {
				color: red;
				display: none;
			}
			
			#x {
				width: 21px;
				height: 22px;
				/*border: 1px solid darkblue;*/
				background-image: url(img/1.png);
				background-position: 0px -1px;
				background-repeat: no-repeat;
				position: absolute;
			}
			
			.xc {
				top: 6px;
				left: 270px;
			}
			
			#z {
				width: 21px;
				height: 22px;
				/*border: 1px solid darkblue;*/
				background-image: url(img/000.png);
				background-position: -3px -1px;
				background-repeat: no-repeat;
				position: absolute;
				display: none;
			}
			
			.zc {
				top: 6px;
				left: 270px;
			}
		</style>
	</head>

	<body>
		<div class="wd">
			<a href="">
				<div class="div1"></div>
			</a>
			<div class="div2"></div>
		</div>
		<div class="wd2">
			<form action="" method="get" id="regForm">

				<div class="div3">
					<div class="div3-a">
						<b>180*****...,</b>欢迎回来!登录
					</div>
					<div class="denglu">
						<input type="text" id="phone" value="" placeholder="手机号/用户名/邮箱" class="denglu1" />
						<div class="tishi">
							帐号不能为空
							<div id="x" class="xc">
							</div>
						</div>
						<div id="z" class="zc">
						</div>
					</div>
					<div class="denglu">
						<input type="password" id="mima" value="" placeholder="密码" class="denglu1" />
						<div class="tishi">
							密码不能为空
							<div id="x" class="xc">
							</div>
						</div>
						<div id="z" class="zc">
						</div>
					</div>
					<div class="denglu3">
						<input type="submit" id="" value="登录" class="denglu-3" />
					</div>
					<div class="denglu4">
						<span id="fl">
						<label class="wz-6-k-n wz-1-fl" id="aa" onclick="gou()"></label>
						记住用户名
					</span>
						<span id="fr">
						<a href="">忘记密码？</a>|<a href="">免费登录</a>
					</span>
					</div>
					<div class="denglu5">
						<p>合作网站账号登录：</p>
						<p>
							<a href="">
								<div class="xinlang" id="fl"></div>
							</a>
							<a href="">
								<div class="qq" id="fl"></div>
							</a>
							<a href="">
								<div class="zhifubao" id="fl"></div>
							</a>
							<a href="">
								<div class="weixing" id="fl"></div>
							</a>
							<p class="gengduo" onclick="dj ()">更多<i class="arrow"></i></p>
						</p>

					</div>
					<div id="dianji">
						<a href="">网易</a>|
						<a href="">人人网</a>|
						<a href="">建行登录</a>|
						<a href="">财付通</a><br />
						<a href="">开心网</a>|
						<a href="">中国移动</a>|
						<a href="">翼支付</a>|
					</div>
				</div>
			</form>
		</div>
		<div class="mowei">
			<p>Copyright 2008-2017 vip.com，All Rights Reserved ICP证：粤 B2-20080329</p>
		</div>
		<script type="text/javascript">
			function dj() {

				if(document.getElementById("dianji").style.display == "block") {
					document.getElementById("dianji").style.display = "none"
				} else {
					document.getElementById("dianji").style.display = "block"
				}

			}
			var n = 1;

			function gou() {
				n++
				if(n % 2 == 0) {

					document.getElementById("aa").style.backgroundPosition = "-23px 0"
				} else {
					document.getElementById("aa").style.backgroundPosition = "-46px 0"
				}
			}

			document.getElementById("regForm").onsubmit = function() {
				var phone = document.getElementById("phone");
				if(phone.value == "") {
					//设置错误消息的显示
					phone.parentNode.children[1].style.display = "block";
					phone.style.border = "solid 1px red";
				}
				return false;
			}

			function fun1() {
				var phone = document.getElementById("phone");
				if(phone.value == "") {
					//设置错误消息的显示
					phone.parentNode.children[1].style.display = "block";
					phone.parentNode.children[2].style.display = "none";
					phone.style.border = "solid 1px red";
				} else {
					phone.parentNode.children[1].style.display = "none";
					phone.parentNode.children[2].style.display = "block";
					phone.style.border = "solid 1px #b2b2b2";
				}
			}
			document.getElementById("phone").onblur = fun1;

			function fun2() {
				var mima = document.getElementById("mima");
				if(mima.value == "") {
					//设置错误消息的显示
					mima.parentNode.children[1].style.display = "block";
					mima.parentNode.children[2].style.display = "none";
					mima.style.border = "solid 1px red";
				} else {
					mima.parentNode.children[1].style.display = "none";
					mima.parentNode.children[2].style.display = "block";
					mima.style.border = "solid 1px #b2b2b2";
				}
			}
			document.getElementById("mima").onblur = fun2;
		</script>
	</body>

</html>